<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员</title>
</head>
<link rel="stylesheet" type="text/css" href="../res/static/css/main.css">
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" media="all">
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.js"></script>



<body>

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo" style="font-size:20px;">管理员</div>
        <ul class="layui-nav layui-layout-right">

            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    admin
                </a>
            </li>
            <li class="layui-nav-item"><a href="managerLogin.html">退出</a></li>
        </ul>
    </div>
</div>
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">用户审核</li>
        <li>菜品上传</li>
        <li>统计</li>

    </ul>
    <div class="layui-tab-content">
        <!-- 用户审核 -->
        <div class="layui-tab-item layui-show">
            <table class="layui-hide" id="demo" lay-filter="demo">
            </table>
        </div>
        <!-- 菜品上传 -->
        <div class="layui-tab-item">
            <form class="layui-form" action="uploadDishes.action" method="post" enctype="multipart/form-data">
                <div class="layui-form-item" style="width: 400px;">
                    <label class="layui-form-label">菜品名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入菜品名"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜品价格</label>
                    <div class="layui-input-inline">
                        <input type="text" name="price" required lay-verify="required" placeholder="请输入菜品价格"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">菜品价格</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜品种类</label>
                    <div class="layui-input-block" style="width: 300px;">
                        <select name="kind" lay-verify="required">
                            <option value=""></option>
                            <option value="荤菜">荤菜</option>
                            <option value="素菜">素菜</option>
                            <option value="面食">面食</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜品图片</label>
                    <div class="layui-input-inline">
                        <input type="file" name="file" required lay-verify="required" placeholder="选择菜品图片"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">菜品图片</div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="submit" class="layui-btn layui-btn-radius layui-btn-warm" value="提交" />
                        <input type="reset" class="layui-btn layui-btn-radius layui-bg-red" value="重置" />
                    </div>
                </div>
            </form>
        </div>
        <!-- 统计 -->
        <div class="layui-tab-item">
            <!-- 日统计 -->

            <div class="layui-tab layui-tab-card">
                <ul class="layui-tab-title">
                    <li class="layui-this">菜品统计</li>
                    <li>日统计</li>
                    <li>月统计</li>

                </ul>
                <div class="layui-tab-content" id="tongji">
                    <!-- 菜品统计内容 -->
                    <div class="layui-tab-item layui-show">

                        <div id="main" style="width: 600px;height:400px;float: left;"></div>
                        <div id="score" style="width: 600px;height:400px;float: right;"></div>


                    </div>
                    <!-- 内容日统计 -->
                    <div class="layui-tab-item">
                        <div class="layui-inline layui-row">
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                                <p style="font-size: 18px;">选择日期</p>
                            </div>
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                                <input type="text" class="layui-input" id="timeD">
                            </div>
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                                <button class="layui-btn layui-btn-normal" onclick="chaxun()">查询</button>
                            </div>
                        </div>
                        <table class="layui-table" lay-even lay-skin="row" lay-size="lg">
                            <thead>
                            <tr>
                                <th>菜品名</th>
                                <th>菜品价格</th>
                                <th>数量</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="day in days">
                                <td>{{day.name}}</td>
                                <td>{{day.Tprice}}</td>
                                <td>{{day.num}}</td>
                            </tr>
                            </tbody>
                        </table>

                    </div>
                    <!-- 月统计内容 -->
                    <div class="layui-tab-item">
                        <div class="layui-inline layui-row">
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                                <p style="font-size: 18px;">选择日期</p>
                            </div>
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                                <input type="text" class="layui-input" id="timeM">
                            </div>
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                                <button class="layui-btn layui-btn-normal" onclick="chaxun1()">查询</button>
                            </div>
                        </div>
                        <table class="layui-table" lay-even lay-skin="row" lay-size="lg">
                            <thead>
                            <tr>
                                <th>菜品名</th>
                                <th>菜品价格</th>
                                <th>数量</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="month in months">
                                <td>{{month.name}}</td>
                                <td>{{month.Tprice}}</td>
                                <td>{{month.num}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/html" id="barDemo">
    <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="yes">通过</button>
    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="no">不通过</button>
</script>
</body>
<script>
    layui.use(['table', 'element', 'form', 'laydate'], function () {
        let table = layui.table;
        let element = layui.element;
        let form = layui.form;
        let laydate = layui.laydate;
        //日期------
        laydate.render({
            elem: '#timeD' //指定元素
        });
        laydate.render({
            elem: '#timeM' //指定元素
            , type: 'month'
        });
        table.on('tool(demo)', function (obj) {
            let data = obj.data;
            if (obj.event === 'yes') {
                $.ajax({
                    url: "check.action",
                    type: "POST",
                    data: {
                        'stuno': data.stuno,
                        'status': 1
                    },
                    success: function (result) {
                        if (result) {
                            layer.alert('审核通过！', { title: '审核' }, function (index) {
                                layer.close(index);
                                history.go(0);
                            });
                        } else alert("查询错误！");
                    },
                    error: function (msg) {
                        console.log(msg);
                        layer.alert('失败', { title: '失败' }, function (index) {
                            layer.close(index);
                        });
                    }
                });
            } else if (obj.event === 'no') {
                layer.open({
                    type: 1 //此处以iframe举例
                    ,
                    title: false,
                    content: '<br><br><br><br><center><h1>你确定要不通过吗?</h1></center>',
                    area: ['390px', '260px'],
                    btn: ['确定', '取消'] //只是为了演示
                    ,
                    yes: function () {
                        layer.closeAll();
                        $.ajax({
                            url: "check.action",
                            dataType: "json",
                            type: "POST",
                            data: {
                                'stuno': data.stuno,
                                'status': 0
                            },
                            success: function (result) {
                                if (result) {
                                    layer.alert('删除成功！', { title: '审核' }, function (index) {
                                        layer.close(index);
                                        history.go(0);
                                    });
                                } else alert("错误！");
                            },
                            error: function (msg) {
                                console.log(msg);

                            }
                        });
                    },
                    btn2: function () {
                        layer.closeAll();
                    }
                    , zIndex: layer.zIndex //重点1
                    , success: function (layero) {
                        layer.setTop(layero); //重点2
                    }
                });
            }
        });
        let vt = new table.render({
            elem: '#demo',
            url: "checkStudents.action",
            parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "data": res //解析数据列表
                };
                this.data.shift();
            },
            height: 'full-20',
            cols: [
                [ //标题栏
                    {
                        field: 'stuno',
                        title: '学号',
                        minWidth: 150
                    }, {
                    field: 'password',
                    title: '密码',
                    minWidth: 160
                }, {
                    toolbar: '#barDemo'
                }

                ]
            ],
            data: [],
            skin: 'line' //表格风格
            , even: true
            , page: true //是否显示分页
            , limits: [5, 7, 10],
            limit: 5 //每页默认显示的数量
        });
    });

    var vm = new Vue({
        el: "#tongji",
        data: {
            'days': [
                {
                    'name': "...",
                    'num': 0,
                    'Tprice': "..."
                },
                {
                    'name': "...",
                    'num': 0,
                    'Tprice': "..."
                }
            ],
            'months': [
                {
                    'name': "...",
                    'num': 0,
                    'Tprice': "..."
                },
                {
                    'name': "...",
                    'num': 0,
                    'Tprice': "..."
                }
            ],
            'caipins': {
                "dishesType":[
                    {
                        "meat":1,
                        "vege":1,
                        "noodle":1
                    }
                ],
                "top5":[
                    {
                        "avg":5,
                        "name":"..."
                    },
                    {
                        "avg":4,
                        "name":"..."
                    },
                    {
                        "avg":3,
                        "name":"..."
                    },
                    {
                        "avg":0,
                        "name":"..."
                    },
                    {
                        "avg":0,
                        "name":"..."
                    },
                ]
            }
        }
    });

    function chaxun() {
        //日统计
        $.ajax({
            url: "dayCount.action",
            data: {
                'time': $("#timeD").val()
            },
            type: "POST",
            success: function (res) {
                vm.days = res;
            }
        });
    }
    function chaxun1() {
        //月统计
        $.ajax({
            url: "monthCount.action",
            data: {
                'time': $("#timeM").val()
            },
            type: "POST",
            success: function (res) {
                vm.months = res;
            }
        });
    }

    $(function () {
        //菜品统计
        $.ajax({
            url: "dishesCount.action",
            data: {
            },
            type: "POST",
            success: function (res) {
                vm.caipins = res;
                console.log(JSON.stringify(res));
                var option = {
                    title: {
                        text: '在售菜品总数'
                    },
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['荤菜', '素菜', '面食'],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '菜品数量',
                            type: 'bar',
                            label: {
                                show: true,
                                position: 'top'
                            },
                            barWidth: '60%',
                            data: [vm.caipins.dishesType[0].meat, vm.caipins.dishesType[0].vege, vm.caipins.dishesType[0].noodle]
                        }
                    ]

                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                // 指定图表的配置项和数据
                var option1 = {
                    title: {
                        text: '评分前五的菜品'
                    },
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: [vm.caipins.top5[0].name, vm.caipins.top5[1].name, vm.caipins.top5[2].name,vm.caipins.top5[3].name,vm.caipins.top5[4].name],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '评分',
                            type: 'bar',
                            label: {
                                show: true,
                                position: 'top'
                            },
                            barWidth: '60%',
                            data: [vm.caipins.top5[0].avg,vm.caipins.top5[1].avg,vm.caipins.top5[2].avg,vm.caipins.top5[3].avg,vm.caipins.top5[4].avg]
                        }
                    ]

                };
                myChart1.setOption(option1);
            }
        });
    })

    var myChart = echarts.init(document.getElementById('main'));
    var colors = ['#5793f3', '#d14a61'];
    var myChart1 = echarts.init(document.getElementById('score'));

</script>

</html>